<script setup>
import { ref, onMounted } from 'vue';
import { getGradeListApi,deleteGradeApi,addGradeApi,updateGradeApi } from "../../api/grade.js";
import {ElMessage} from "element-plus";

const getGradeList = async () => {
  const { data:res } = await getGradeListApi()
  gradeList.value = res.data
}

const gradeList = ref([]);
const seerchName = ref({ studentName: '' });
const addGradeDialogVisible = ref(false);
const editGradeDialogVisible = ref(false);
const deleteGradeDialogVisible = ref(false);

const GradeData = ref({
  student_name: '',
  course_name: '',
  grade:''
});

const GradeDataEditor = ref({});
const GradeDataDelete = ref({});

const addGrade = async () => {
  // 添加成绩逻辑
  addGradeDialogVisible.value = false;
  const { data:res } = await addGradeApi(GradeData.value)
  if (res.code == 200){
    ElMessage.success('添加成功')
    getGradeList();
  }else {
    ElMessage.error('添加失败')
  }
};

const Edit = async () => {
  // 编辑成绩逻辑
  editGradeDialogVisible.value = false;
  console.log(GradeDataEditor.value.value)
  const {data:res} = await updateGradeApi(GradeDataEditor.value.value)
  console.log(res.data)
  if (res.code == 200){
    ElMessage.success('编辑成功')
    getGradeList();
  }else {
    ElMessage.error('编辑失败')
  }

};

const userDelete = async () => {
  // 删除成绩逻辑
  deleteGradeDialogVisible.value = false;
  const {data : res} = await deleteGradeApi(GradeDataDelete.value.value.id)
  console.log(res.data)
  if (res.code == 200){
    ElMessage.success('删除成功')
    getGradeList();
  }else {
    ElMessage.error('删除失败')
  }
};

const Reset = () => {
  // 重置搜索逻辑
};

const Search = () => {
  // 搜索逻辑
};
onMounted(() => {
  getGradeList();
});
</script>

<template>
  <div>
    <el-card>
      <el-row>
        <!-- 搜索框 --->
        <el-col :span="5">
          <el-form :model="searchName" label-width="80px">
            <el-form-item label="学生名称">
              <el-input v-model="searchName" placeholder="请输入学生名称" />
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="5">
          <el-form :model="searchCourse" label-width="80px">
            <el-form-item label="课程名称">
              <el-input v-model="searchCourse" placeholder="请输入课程名称" />
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Search" style="margin-left: 20px">搜索</el-button>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Reset">重置</el-button>
        </el-col>

        <el-col :span="10">
          <el-form></el-form>
        </el-col>
      </el-row>
      <!-- 操作 --->
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addGradeDialogVisible = true">添加成绩</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="DeleteAll">批量删除</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">更多操作</el-button>
        </el-col>
        <el-col :span="18">
          <el-form></el-form>
        </el-col>
      </el-row>

      <!-- 成绩列表 --->
      <el-card style="margin-top: 20px">
        <el-table :data="gradeList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180" />
          <el-table-column prop="student_name" label="学生名称" width="180" />
          <el-table-column prop="course_name" label="课程" />
          <el-table-column prop="grade" label="分数" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="editGradeDialogVisible = true;GradeDataEditor.value={...scope.row}">
                编辑
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  plain
                  @click="deleteGradeDialogVisible=true;
                  GradeDataDelete.value={...scope.row}"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <!-- 添加成绩对话框 -->
    <el-dialog title="添加成绩" v-model="addGradeDialogVisible" width="30%">
      <el-form :model="GradeData">
        <el-form-item label="学生名称" label-width="120px">
          <el-input v-model="GradeData.student_name"></el-input>
        </el-form-item>
        <el-form-item label="课程" label-width="120px">
          <el-input v-model="GradeData.course_name"></el-input>
        </el-form-item>
        <el-form-item label="分数" label-width="120px">
          <el-input v-model="GradeData.grade"></el-input>
        </el-form-item>
        <!-- 其他表单项... -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addGradeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addGrade">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑成绩对话框 -->
    <el-dialog title="编辑成绩" v-model="editGradeDialogVisible" width="30%">
      <el-form :model="GradeDataEditor">
        <el-form-item label="学生名称" label-width="120px">
          <el-input v-model="GradeDataEditor.value.student_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程" label-width="120px">
          <el-input v-model="GradeDataEditor.value.course_name" disabled readonly></el-input>
        </el-form-item>
        <el-form-item label="分数" label-width="120px">
          <el-input v-model="GradeDataEditor.value.grade"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editGradeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Edit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除成绩对话框 -->
    <el-dialog title="提示" v-model="deleteGradeDialogVisible" width="30%">
      <el-form>
        <el-form-item label="确定删除该成绩吗？" label-width="120px">
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteGradeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="userDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
